<template>
  <div class="third-order">
    <div class="outerTable">
      <el-tabs type="card" @tab-click="onTabClick" v-model="memberData.auditStatus">

        <el-tab-pane lazy label="会员列表" name="memberList">
          <MemberList @setLoadData="loadData" :memberDataList="memberData.memberList"></MemberList>
        </el-tab-pane>

        <el-tab-pane lazy label="等级设置" name="setLevel">
          <EditLevel ref="editLevelRef"></EditLevel>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>
<script setup>
import { reactive, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import MemberList from '@/pages/member/components/memberList.vue'
import EditLevel from '@/pages/member/components/editLevel.vue'
import Button from '@/components/button/button.vue'
import Link from '@/components/button/link.vue'

/*********** 会员列表开始 ********************/
const editLevelRef = ref(null)
const memberData = reactive({
  memberList: [],
  auditStatus: 'memberList'
})
// 切换选项卡
const onTabClick = async (tab) => {
  memberData.auditStatus = tab.props.name
  if (tab.props.name === 'setLevel' && editLevelRef.value) {
    editLevelRef.value.loadData()
  }
}
const loadData = async () => {
  let url = `/medinstrument/third/member/getMemberItemList`
  let { data, err } = await api.get(url)
  if (err) {
    ElMessage.error(err)
  } else {
    memberData.memberList = data
  }
}


onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.third-order {
  margin-top: 20px
}

.outerTable {
  .el-dropdown {
    margin-left: 10px;
  }

  .after-sale,
  .after-sale-deliver {
    color: #ffc000;
    margin-left: 5px;
  }

  .after-sale {
    font-size: 12px;
  }
}
</style>
